<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 VUI(https://git.oschina.net/durcframework/vui) All rights reserved.
 */

;(function(){


var datepick = null;

var calendar = new VUI.Calendar({
	autoRender:false
	,showFoot:true
	,autoHide:true
	,position:'absolute'
	,zindex:999
	,clickHandler:function(data) {
		datepick.fire('Click',data);
	}
	,cancelHandler:function(data) {
		datepick.fire('Cancel',data);
	}
});

calendar.render(document.body);

// 点击其它地方隐藏
$(document).click(function(e){
	if(calendar &amp;&amp; calendar.visiable()) {
		var $target = $(e.target); 
		var $input = datepick.$target;
		
		if($target.get(0) == $input.get(0)) {
			return;
		}
		
		if($target.closest(calendar.view.getWraper()).length == 0){ 
			calendar.hide();
		}  
	}
})


<span id='VUI-DatePick'>/**
</span> * 日期选择器&lt;br&gt;
 * &lt;pre&gt;
new VUI.DatePick({
	targetId:'pick'
});

new VUI.DatePick({
	targetId:'pick2'
});
 * &lt;/pre&gt;
 * @class VUI.DatePick
 * @extends VUI.Component
 */
VUI.Class('DatePick',{
	// 默认属性
	OPTS:{
<span id='VUI-DatePick-cfg-targetId'>		/**
</span>		 * @cfg {String} targetId 目标元素的ID
		 */
		targetId:''
		,offsetX:0
		,offsetY:23
		,onClick:function(data) {
			this.$target.val &amp;&amp; this.$target.val(data.y + '-' + data.m + '-' + data.d);
			this.hideCalendar();
		}
		,onCancel:function() {
			this.$target.val &amp;&amp; this.$target.val('');
			this.hideCalendar();
		}
	}
<span id='global-method-constructor'>	/**
</span>	 * 构造函数
	 * @constructor
	 * @ignore
	 */
	,init:function(opts) {
		this._super(opts);
		this.bind();
	}
<span id='VUI-DatePick-method-bind'>	/**
</span>	 * @private
	 */
	,bind:function() {
		var that = this;
		this.calendar = calendar;
		var targetId = this.opt('targetId');
		
		this.$target = $('#'+targetId).click(function(){
			datepick = that;
			that.showCalendar();
		}).css({cursor:'pointer'})
		.attr('placeholder','点击选择日期');
	}
<span id='VUI-DatePick-method-showCalendar'>	/**
</span>	 * @private
	 */
	,showCalendar:function() {
		this._setPosition(this.$target);
		this.calendar.showCalendar(this.$target.val());
	}
<span id='VUI-DatePick-method-hideCalendar'>	/**
</span>	 * @private
	 */
	,hideCalendar:function() {
		this.calendar.hide();
	}
	,_setPosition:function($target) {
		var offset = $target.offset();
	    var $calDiv = this.calendar.view.getWraper();
	    $calDiv.css({
	    	left : (offset.left + this.opt('offsetX')+'px')
	    	,top : (offset.top + this.opt('offsetY')+'px')
	    });
	    
	}
},VUI.Common);

})();</pre>
</body>
</html>
